<template>
  <div class="app-container">
    <el-form ref="ruleForm2" :model="form" :rules="rules" size="mini" label-width="100px" class="demo-ruleForm">
      <el-form-item label="影厅名称" prop="ting_name">
        <el-input v-model="form.ting_name" size="mini" type="text" style="width: 300px;" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="排序方式" prop="sort_type">
        <el-select v-model="form.sort_type" size="mini" placeholder="排序方式">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="影厅座位">
        <seats
          :sort-type="form.sort_type"
          :is-seat="false"
          :ting-data="form.ting_data"
          @tingCheckedCall="pianCheckedCall"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { update, add } from '@/api/ting'
import moment from 'moment'
import waves from '@/directive/waves' // Waves directive
import ElRow from 'element-ui/packages/row/src/row'
import ElInput from '../../../node_modules/element-ui/packages/input/src/input.vue'
import Seats from '../../components/seats/index'

export default {
  name: 'HallList',
  components: { Seats, ElInput, ElRow },
  directives: { waves },
  data() {
    return {
      form: {
        ting_name: '',
        ting_data: [],
        create_time: '',
        update_time: '',
        sort_type: 'leftToRight'
      },
      isAdd: true,
      rules: {
        ting_name: [
          { required: true, message: '请输入影厅', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
      options: [{
        value: 'leftToRight',
        label: '从左到右'
      }, {
        value: 'rightToLeft',
        label: '从右到左'
      }]
    }
  },
  created() {
    const params = this.$route.params
    if (params && params.id) {
      console.info(params)
      this.isAdd = false
      this.form = params
    }
  },
  methods: {

    // 时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },

    // 选中位置时回调
    pianCheckedCall(data) {
      this.form.ting_data = JSON.stringify(data)
    },

    // 新增影片
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return
        }

        if (!this.form.ting_data) {
          return alert('请选择厅座位')
        }

        var nowTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')

        if (this.isAdd) {
          this.form.create_time = nowTime
          add(this.form).then(response => {
            this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
              // eslint-disable-next-line no-undef
              if (this.affixTags.some(tag => tag.path === view.path)) {
                return
              }
              this.toLastView(visitedViews)
            })
            this.$router.push({ path: '/hall/list?' + +new Date() })
          })
        } else {
          update(this.form).then(response => {
            this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
              // eslint-disable-next-line no-undef
              if (this.affixTags.some(tag => tag.path === view.path)) {
                return
              }
              this.toLastView(visitedViews)
            })
            this.$router.push({ path: '/hall/list?' + +new Date() })
          })
        }
        this.form = {}
      })
    }

  }
}

</script>

<style lang="css">
  .search-row {
    padding: 10px 0px;
  }
</style>

